<template>
  <div class="h-100vh bg-[#0C468D] flex flex-col px-20px home ">
    <SystemTitle></SystemTitle>
    <div class="content-container flex justify-between" >
      <div class="w-500px h-full flex flex-col justify-around ">
        <!-- grid grid-cols-1 grid-rows-3 gap-y-6px -->
        <dv-border-box13 class="pa-15px box-border h-32%">
          <!-- 今日场馆组件 -->
          <TodayVenue class="w-full h-100%"></TodayVenue>
        </dv-border-box13>
        <dv-border-box13 class="pa-15px box-border h-32%">
          <!-- 近一年客流量趋势分析 -->
          <YearlyVisitorTrend class="w-full h-100%"></YearlyVisitorTrend>
        </dv-border-box13>
        <dv-border-box13 class="pa-15px box-border h-32%">
          <!-- 近一年销售金额趋势分析 -->
          <YearlySaleAmount class="w-full h-100%"></YearlySaleAmount>
        </dv-border-box13>
      </div>

      <div class="h-full flex flex-col justify-around">
        <div></div>
        <div>
          <VisitorCounter class="w-full h-100%"></VisitorCounter>
        </div>
      </div>
      <div class="w-500px h-full flex flex-col justify-around">
        <dv-border-box13 class="pa-15px box-border h-32%">
          <!-- 最受欢迎项目Top排名 -->
          <PopularProjectsTop class="w-full h-100%"></PopularProjectsTop>
        </dv-border-box13>
        <dv-border-box13 class="pa-15px box-border h-30%">
          <!-- 线上人群占比 -->
          <OnlinePopulation class="w-full h-100%"></OnlinePopulation>
        </dv-border-box13>
        <dv-border-box13 class="pa-15px box-border h-34%">
          <!-- 积分Top5排名 -->
          <PointsRanking class="w-full h-100%"></PointsRanking>
        </dv-border-box13>
      </div>
    </div>
  </div>
</template>

<script setup name="Home">
import { ref, onMounted, watch } from 'vue'

import SystemTitle from '@/components/SystemTitle.vue'
import TodayVenue from '@/components/TodayVenue.vue'
import YearlyVisitorTrend from '@/components/YearlyVisitorTrend.vue'
import YearlySaleAmount from '@/components/YearlySaleAmount.vue'
import PopularProjectsTop from '@/components/PopularProjectsTop.vue'
import OnlinePopulation from '@/components/OnlinePopulation.vue'
import PointsRanking from '@/components/PointsRanking.vue'
import VisitorCounter from '@/components/VisitorCounter.vue'

import { getRefreshSet } from '@/api/index'
import { useRefreshStore } from '@/store/modules/refreshStore'
const refreshStore = useRefreshStore()
let refreshTimer = null


watch(() => refreshStore.refreshInterval, () => {
  createTimer()
})

function createTimer() {
  if (refreshTimer) {
    clearInterval(refreshTimer)
  }
  // 设置定时器
  refreshTimer = setInterval(() => {
    refreshStore.triggerRefresh()
    init()
  }, refreshStore.refreshInterval)

  // 初始立即触发一次刷新
  refreshStore.triggerRefresh()
}
async function init() {
  const res = await getRefreshSet()
    const refreshTime = res.data.refreshTime || 1
    const timeUnit = res.data.timeUnit || 1 // 1:分钟;2:小时;3:秒

    refreshStore.refreshInterval = refreshTime * (timeUnit == 1 ? 60 : timeUnit == 2 ? 60 * 60 : 1) * 1000
}

onMounted(async () => {
  init()
})

onUnmounted(() => {
  if (refreshTimer) {
    clearInterval(refreshTimer)
  }
})
</script>
<style lang="scss" scoped>
.home {
  overflow: hidden;
  background: url('@/assets/home_bg.jpg') no-repeat center center fixed;
  background-size: cover;
  box-sizing: border-box; // 包含内边距和边框
  .content-container {
    height: calc(100vh - 110px);
  }
}
</style>
